<template>
    <div class="minaddBxo" v-loading="loading">
        <!-- <div>
            {{ this.name }}
        </div> -->
        <el-form v-if="!this.name" label-width="120px" label-position="top">
            <el-form-item label="资产编号：">
                <div class="ipt_div">{{ addForm.zid }}</div>
            </el-form-item>
            <el-form-item label="资产类别：">
                <el-select size="small" v-model="addForm.asType" placeholder="请选择资产类别">
                    <el-option v-for="item in asTypeArr" :label="item.name" :value="item.value" :key="item.value"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-form v-if="this.name == 'ausdWaiting'" label-width="120px" label-position="top">
            <div class="ausdWaiting_p">
                <p>资产编号：{{ addForm.zid }}</p>
                <p>NFT合约地址：{{ obj && obj.nftAddress }}</p>
                <p>铸币数量：{{ obj && obj.amount }} ({{ obj && obj.minted?'已铸币':'未铸币' }})</p>
                <p>铸币转入地址：{{ obj && obj.mintTo }} </p>
            </div>
            <!-- <el-form-item label="资产编号：">
                <div class="ipt_div">{{ addForm.zid }}</div>
            </el-form-item>
            <el-form-item label="NFT合约地址：">
                <div class="ipt_div">{{ obj && obj.nftAddress }}</div>
            </el-form-item>
            <el-form-item label="铸币数量：">
                <div class="ipt_div">{{ obj && obj.amount }}</div>
            </el-form-item>
            <el-form-item label="铸币数量：">
                <div class="ipt_div">{{ obj && obj.amount }}</div>
            </el-form-item> -->
        </el-form>
        
        <el-form label-width="120px" label-position="top" :model="addForm" ref="addForm">
            <el-form-item v-for="(item,index) in addForm.formArr" :key="index" :label="item.label+'：'" :prop="'formArr.' + index + '.value'" 
            :rules="{required: true, message: item.label+'不能为空', trigger: 'blur'}" >
                <el-select v-if="item.valueType == 'select'" size="small" v-model="item.value" :placeholder="'请选择'+item.label">
                    <el-option v-for="items in item.arrType" :label="items" :value="items" :key="items"></el-option>
                </el-select>
                <el-input v-if="item.valueType=='multiinput'" type="textarea" size="small" v-model="item.value" auto-complete="off" :placeholder="'请输入'+item.label"></el-input>
                <el-input v-if="item.valueType=='input'" size="small" v-model="item.value" auto-complete="off" :placeholder="'请输入'+item.label"></el-input>
                <!-- radio -->
                <el-radio-group v-if="item.valueType=='radio'" v-model="item.value">
                    <el-radio label="是">是</el-radio>
                    <el-radio label="否">否</el-radio>
                </el-radio-group>
                <div v-if="item.valueType=='images'" class="imageBox">
                    <div class="uploadBox" @click="onupload()">
                        <img src="../../assets/img/upload.png" alt="" >
                        <p>点击或将文件拖拽到这里上传</p>
                        <span>支持Jpg、png等格式，最多6张，每张<br />大小在10m以内</span>
                    </div>
                    <div v-if="imageArr && imageArr.length > 0" class="imgsarr">
                        <div v-for="(imgs,index) in imageArr">
                            <img :src="imgs" alt="" >
                            <p @click="remove(index)">删除图片</p>
                        </div>
                    </div>
                </div>
                <div v-if="item.valueType=='image'" class="imageBoxs">
                    <div class="uploadBox" @click="onupload()" v-if="imageArr.length == 0">
                        +
                    </div>
                    <div v-if="imageArr && imageArr.length > 0" class="imgsarr imgsarr_one">
                        <div v-for="(imgs,index) in imageArr">
                            <img :src="imgs" alt="" >
                            <p @click="remove(index)">删除图片</p>
                        </div>
                    </div>
                </div>
            </el-form-item>
        </el-form>
        <input type="file" ref="inputRef" @change="handleFileUpload" accept="image/*" :multiple="false" class="none" />
        <div class="minaddBxo-footer">
            <button @click="submitForm('addForm')" v-if="obj && !obj.minted && name == 'ausdWaiting'">
                {{name == 'ausdWaiting'?'AUSD铸币':''}}
            </button>
            <button @click="submitForm('addForm')" v-if="name != 'ausdWaiting'">
                {{(name != 'nftConfirm' && name != 'ausdWaiting')?'提交':''}}
                {{name == 'nftConfirm'?'一键生成资产凭证(NFT)':''}}
                {{name == 'ausdWaiting'?'AUSD铸币':''}}
            </button>
        </div>

        <div class="dexBox" v-if="this.name" @click="ongetDetail">
            资产详情
        </div>

        <el-dialog title="资产详情" :visible.sync="dialogTableVisible">
            <div v-if="detailObj" class="detail_box">
                <div class="detail_p"><span>资产编号：</span><div>{{ this.detailObj.zId }}</div> </div>
                <div class="detail_p"><span>资产类别：</span><div>{{ this.detailObj.assetType }}</div></div>
                <div v-if="detailObj.list">
                    <div v-for="item in detailObj.list" :key="item.name" class="detail_p">
                       <span>{{item.name}} ：</span>
                       <div v-if="item.valueType == 'images'">
                            <div v-for="(imgs,index) in JSON.parse(item.value)">
                                <img :src="imgs" alt="" >
                            </div>
                        </div>
                        <div v-if="item.valueType != 'images'">
                            {{item.value}}
                        </div>
                       
                    </div>
                </div>
                
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { PreAsset,CommitAsset ,AssetTypeOfValues , GetNftMintResult , GetAUsdResult , GetAssetInfo } from '../../api/userMG'
import { upHttp } from '../../api/axiosFun'
export default {
    props: ['name','zid','obj'],
  data() {
    return {
      activeName: 'assets',
      loading:false,
      isAdd:false,
      dialogTableVisible:false,
      imageArr:[
        // 'http://192.168.0.185:11990/api/m/file/preview/1000090999/9995544407965696',
        ],
      
      addForm: {
        zid:'',
        asType: '2',
        formArr:[
        ],
      },
      asTypeArr:[
        {name:'房产',value:'2'},
        {name:'加密资产',value:'3'},
        {name:'贵金属',value:'4'},
        {name:'股票',value:'5'},
        {name:'债券',value:'6'},
        {name:'古董字画',value:'7'},
      ],
      detailObj:null
    }
  },

  created() {
    // alert(this.name)
    if(this.zid){
        this.addForm.zid = this.zid
    }
    this.getdata()
  },

  methods: {
    getdata() {
        if(this.name == ''){
            PreAsset().then(res => {
                if (res.code != 0) {
                    this.$message({
                    type: 'info',
                    message: res.message
                    })
                } else {
                    this.addForm.zid = res.data.zId
                }
            })
        }

        
        AssetTypeOfValues({
                "atId":2,
                "status": this.name
                }).then(res => {
                if (res.code != 0) {
                    this.$message({
                    type: 'info',
                    message: res.message
                    })
                } else {
                    let arr = [];
                    res.data.forEach(element => {
                        let slectArr = '';
                        if(element.valueType == 'select' && element.data){
                            slectArr = JSON.parse(element.data)
                        }
                        arr.push({label:element.name,value:'',valueType:element.valueType,arrType:slectArr,atiId: element.atiId})
                    });
                    this.addForm.formArr = arr
                    console.log(this.addForm.formArr)
                }
            })
        
    },
    submitForm(formName){
        this.$refs[formName].validate(valid => {
            if (valid) {
                this.loading = true;
                CommitAsset({
                    "zId": this.addForm.zid,
                    "submit": true,
                    "atId": 2,
                    "values":this.addForm.formArr
                }).then(res => {
                    this.loading = false;
                    if (res.code != 0) {
                        this.$message({
                            type: 'info',
                            message: res.message
                        })
                    } else {
                        this.$message({
                            type: 'success',
                            message: '提交成功!'
                        })
                        if(this.name == 'nftConfirm'){
                            this.onGetNftMintResult()
                        }else if(this.name == 'ausdWaiting'){
                            this.onGetAUsdResult()
                        }else{
                            this.$emit('onEstimating',this.name)
                        }
                        
                    }
                })
            }
        })
        return
    },
    onGetNftMintResult(){
        this.loading = true;
        GetNftMintResult({
                    "zId": this.addForm.zid,
                }).then(res => {
                    if (res.code != 0) {
                        let timer = setTimeout(()=>{
                            clearTimeout(timer)
                            this.onGetNftMintResult()   
                        },3000)
                    } else {
                        this.loading = false;
                        this.$emit('onEstimating',this.name)
                    }
                }).catch(()=>{
                    let timer = setTimeout(()=>{
                        clearTimeout(timer)
                        this.onGetNftMintResult()   
                    },3000)
                })
    },
    onGetAUsdResult(){
        this.loading = true;
        GetAUsdResult({
                    "zId": this.addForm.zid,
                }).then(res => {
                    if (res.code != 0) {
                        let timer = setTimeout(()=>{
                            clearTimeout(timer)
                            this.onGetAUsdResult()   
                        },3000)
                    } else {
                        this.loading = false;
                        this.$emit('onEstimating',this.name)
                    }
                }).catch(()=>{
                    let timer = setTimeout(()=>{
                        clearTimeout(timer)
                        this.onGetAUsdResult()   
                    },3000)
                })
    },
    
    onupload(){
        if(this.imageArr.length == 6){
            this.$message({
                type: 'info',
                message: "图片最多为6张"
            })
            return
        }
        this.$refs.inputRef.value = '';
        this.$refs.inputRef.click()
    },
    remove(idx){
        this.imageArr.forEach((item, index)=> {
            if(index == idx) {
                this.imageArr.splice(index, 1);
            }
        });
        if(this.name == ''){
            this.addForm.formArr[9].value = JSON.stringify(this.imageArr)
        }
        if(this.name == 'nftConfirm'){
            this.addForm.formArr[3].value = this.imageArr[0]
        }

        
    },
    // 上传
    async handleFileUpload(event){
      console.log(event)
      let formData = new FormData()
      let file = event.target.files[0]
      console.log(file)
      // let blob = new Blob([file]);
      formData.append('file', file)
      let res = await upHttp('/api/m/File/upload/1000090999', formData)
    //   debugger
      console.log('res')
      console.log(res)
      if (res && res.code == 0) {
        this.$message({
          type: 'success',
          message: '上传成功！'
        })

        this.imageArr.push(res.data.fullPah)
        if(this.name == ''){
            this.addForm.formArr[9].value = JSON.stringify(this.imageArr)
        }
        if(this.name == 'nftConfirm'){
            this.addForm.formArr[3].value = res.data.fullPah
        }
        
      } else {
        this.$message({
          type: 'info',
          message: res && res.message || '上传失败'
        })
      }
    },

    ongetDetail(){
        this.dialogTableVisible = true;
        GetAssetInfo({
            "zId": this.addForm.zid,
            "status": ""
        }).then(res => {
                if (res.code != 0) {
                    this.$message({
                    type: 'info',
                    message: res.message
                    })
                } else {
                    this.detailObj = res.data
                }
            })
    }
  }
}
</script>

<style scoped>
.ausdWaiting_p p{color: #666;margin-bottom: 30px;font-size: 14px;}

    .dexBox{
        background: #000;
        border-radius: 50px;
        line-height: 30px;
        position: fixed;
        right: 50px;
        bottom: 100px;
        padding: 0 20px;
        color: #fff;
        font-size: 12px;
        cursor: pointer;
    }
    .ipt_div{
        text-align: center;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        height: 40px;
    }
    .minaddBxo{
        width: 900px;
        margin: 0 auto;
    }
    .minaddBxo .el-select{
        width: 100%;
    }
    .minaddBxo /deep/ .el-form-item__label{
        padding: 0 !important;
    }

    .minaddBxo /deep/ .el-input__inner{
        line-height: 40px;
        height: 40px;
        text-align: center;
    }
    .minaddBxo-footer button{
        background:#1C1E22;
        color: #fff;
        border-radius: 30px;
        width: 300px;
        border:0;
        line-height: 46px;
        font-size: 16px;
        margin: 50px auto 100px;
        display: block;
        cursor: pointer;
    }
</style>